// 渲染项的顶部标题
const renderTitle = (h, data, props) => {
	const { hasShowNumber, hasShowPost, hasShowTotal } = props;
	const childrenNodes = [];

	// 处理主题颜色改变
	const { titleStyle, totalStyle } = handleThemeChange(data);
	const hData = {
		style: titleStyle,
		domProps: {
			className: 'inner-content-title'
		}
	};

	// 人数
	const currentNumber = h(
		'div',
		{
			domProps: {
				className: 'inner-content-title-current'
			}
		},
		[data.empCount]
	);
	// 编制人数
	const totalNumber = h(
		'div',
		{
			style: totalStyle,
			domProps: {
				className: 'inner-content-title-total'
			}
		},
		[data.headCount]
	);
	// 是否显示人数
	hasShowNumber && childrenNodes.push(currentNumber); //data.usercount
	!hasShowNumber && childrenNodes.push([]); //data.usercount
	hasShowTotal && childrenNodes.push(totalNumber); //data.totalCount
	!hasShowTotal && childrenNodes.push([]); //data.totalCount

	return h('div', hData, childrenNodes);
};
// 处理主题颜色改变
const handleThemeChange = (data) => {
	let titleStyle = {};
	let textStyle = {};
	let totalStyle = {};
	if (data.theme) {
		const { colorCode, fontColorCode, subColorCode } = data.theme;
		const border = `1px solid ${colorCode}`;
		titleStyle = {
			'border-bottom': 'none',
			borderTop: border,
			borderLeft: border,
			borderRight: border,
			backgroundColor: `${colorCode}`,
			color: `${fontColorCode}`
		};
		textStyle = {
			borderBottom: border,
			borderTop: 'none',
			borderLeft: border,
			borderRight: border
		};
		totalStyle = {
			backgroundColor: `${subColorCode}`,
			color: `${fontColorCode}`
		};
	}
	return {
		titleStyle,
		textStyle,
		totalStyle
	};
};
// 渲染标题
const renderText = (h, data, props) => {
	const label = data[props.props.label];
	const childrenNodes = [];
	childrenNodes.push(label);
	const { textStyle } = handleThemeChange(data);

	const hData = {
		style: textStyle,
		domProps: {
			className: 'inner-content-text'
		}
	};
	return h('div', hData, childrenNodes);
};

// 渲染inner
export const renderInner = (h, data, props) => {
	const childrenNodes = [];
	// 渲染项的顶部标题;
	const title = renderTitle(h, data, props);
	const text = renderText(h, data, props);
	childrenNodes.push(title);
	childrenNodes.push(text);

	// 是否竖直展示
	const vertical = data.vertical || false;
	const cls = ['inner-content'];
	!props.horizontal && vertical && cls.push('vertical');
	const hData = {
		domProps: {
			className: cls.join(' ')
		}
	};
	return h('div', hData, childrenNodes);
};

export const renderEmpInner = (h, data, props) => {
	const childrenNodes = [];
	// 渲染项的顶部标题;
	const title = renderTitle(h, data, props);
	const text = renderText(h, data, props);
	childrenNodes.push(title);
	childrenNodes.push(text);

	// 是否竖直展示
	const vertical = data.vertical || false;
	const cls = ['inner-content'];
	!props.horizontal && vertical && cls.push('vertical');
	const hData = {
		domProps: {
			className: cls.join(' ')
		}
	};
	return h('div', hData, childrenNodes);
};
